<%@ tag language="java" pageEncoding="UTF-8" body-content="empty" trimDirectiveWhitespaces="true"%>
<%@ attribute name="id" type="java.lang.String" required='true' description="分页组件的id，根据此id，你可以在js代码中访问分页组件的实例对象，进而访问它提供的方法"%>
<%@ attribute name="pageSize" type="java.lang.Integer" description="每一页显示多少条记录，默认值 5" required='true'%>
<%@ attribute name="showPageChoice" type="java.lang.Boolean" description="是否显示下拉选择框，默认值  showChoice='true'"%>
<%@ attribute name="datatable" type="java.lang.String" required="true" description="和pagination相关联的datatable"%>
<%@ attribute name="pageChoice" type="java.lang.String" description="下拉选择每页显示多少条记录，默认值：choice='5,10,15'"%>
	
<div id="${id}" class="col-md-12 col-sm-8" style="text-align:center">
	<ul id="ul" class="pager">
		<li class="previous"><a id="homePage" href="javascript:void(0)" onclick="${id}.pageChanged('homePage')" ><i class='icon icon-step-backward'></i></a></li>
		<li class="previous"><a id="prevPage" href="javascript:void(0)" onclick="${id}.pageChanged('prevPage')" ><i class='icon icon-angle-left'></i> </a></li>
		<li class="pagination-input"><a href="javascript:void(0)" ><input id='currentPage' name='page' value='1' onchange="${id}.pageChanged('currentPage')" onpause="return false;" ondrop="return false;" ondrag="return false;"></a></li>
		<li class="next"><a id="nextPage" href="javascript:void(0)" onclick="${id}.pageChanged('nextPage')" ><i class='icon icon-angle-right'></i></a></li>
		<li class="next"><a id="endPage" href="javascript:void(0)" onclick="${id}.pageChanged('endPage')" ><i class='icon icon-step-forward'></i></a></li>
		<li><a class='text'>共<span id='maxPage'>1</span>页，<span id='count'></span>条记录<span class='pageSize'>，显示</span></a></li>
		<li class='pageSize' >
	        <select class="form-control rows" name="rows" id="rows" onchange="${id}.pageChanged('rowsChanged')">
				<option value="5" selected="selected">5</option>
				<option value="10">10</option>
				<option value="15">15</option>
			</select>
		</li>
	</ul>
</div>
<script type="text/javascript">
(function(){
	// 设置是否显示下拉选择框（选择pageSize）
	var showChoice = "${showPageChoice}";
	if(!(showChoice== "" || showChoice!='false')){
		$("#${id} .pageSize").css("display","none");
	}
	
	// 输出下拉选择框
	var pageChoice = eval("[${pageChoice}]");
	if(pageChoice.length>0) {
		var $pageSelection = $("#${id} #rows").empty();
		$.each(pageChoice,function(){
			$pageSelection.append("<option value='"+this+"'>"+this+"</option>");
		});
	}
	
	// 得到和pagination相关联的datatable
	var mDatatable = window["${datatable}"];
	
	// 设置默认显示多少行数据
	var pageSize = "${pageSize}" || 5;
	var $mPagination = $("#${id}");
	$mPagination.find("#rows").val(pageSize);
	
	// 初始化分页组件
	window["${id}"] = new Pagination("${id}",mDatatable); // 将分页组件赋值给window对象，这样就可以在任意地方通过id来访问了
	
	var pagination = window["${id}"];
	// Logger.info("pagination.tag => ajax = " + JSON.stringify(mAjax));
	var doSend = mDatatable.automatic || false;
	pagination.refresh(doSend); // 刷新,不自动请求数据
	
})();
</script>
